<script setup lang="ts">
import { ref, computed } from 'vue';
import { Close } from '@element-plus/icons-vue';
import useCesiumDrawArea from '@/hooks/useCesiumDrawArea';
import { useAssistStore } from '@/store/modules/Assist/useAssistStore';
import { getConcentration } from '@/api/Assist';
import icon1 from '@/assets/icons/svg/draw3.svg';
import icon2 from '@/assets/icons/svg/draw2.svg';
import icon3 from '@/assets/icons/svg/draw1.svg';

// 使用解构获取store方法和状态
const assistStore = useAssistStore();
const { getGisListHandle } = assistStore;
const { currentWarningId } = storeToRefs(assistStore);

// 使用枚举定义类型
const DialogType = {
  SHOW_DRAW: 'showDraw',
  SHOW_AREA: 'showArea'
} as const;

// 区域选项配置
const areaOptions = [
  {
    type: '2',
    icon: icon1,
    label: '高浓度区'
  },
  {
    type: '3',
    icon: icon2,
    label: '中浓度区'
  },
  {
    type: '4',
    icon: icon3,
    label: '低浓度区'
  }
];

// 使用更清晰的响应式状态管理
const dialogState = ref({
  [DialogType.SHOW_DRAW]: false,
  [DialogType.SHOW_AREA]: false
});

const currentType = ref<keyof typeof DialogType>(null);
const showNongdu = ref(false);
const concentrationValue = ref('');

// 计算属性
const plottingParams = ref({
  warningId: currentWarningId.value,
  coordinate: '',
  type: '',
  value: ''
});
//开启标绘对话框
const openHandle = (type: keyof typeof DialogType) => {
  reset();
  currentType.value = type;
  dialogState.value[type] = true;
};

const reset = () => {
  concentrationValue.value = '';
  dialogState.value = {
    [DialogType.SHOW_DRAW]: false,
    [DialogType.SHOW_AREA]: false
  };
  showNongdu.value = false;
};

const closeDialog = () => {
  dialogState.value[currentType.value] = false;
};

const draw = (type: string) => {
  plottingParams.value.type = type;
  const { startDrawingPoints, stopDrawingPoints } = useCesiumDrawArea({
    viewer: window.viewer,
    onPointAdded: (position) => {
      stopDrawingPoints();
      plottingParams.value = {
        ...plottingParams.value,
        coordinate: position,
        type: type
      };
      showNongdu.value = true;
    }
  });
  startDrawingPoints();
};

const drawFaces = (type: string) => {
  // 实现绘制区域逻辑
  plottingParams.value.type = type;
  const { startDrawing, clearAllAreas } = useCesiumDrawArea({
    viewer: window.viewer,
    onDrawEnd: (positions) => {
      //逻辑是前端绘制完毕取得数据之后 向后端发送数据 并且清除掉前端绘制的区域 绘制的数据需要取得后端给返回的数据
      console.log('绘制结束，区域点坐标:', positions);
      plottingParams.value = {
        ...plottingParams.value,
        coordinate: JSON.stringify(positions),
        type: type
      };
      clearAllAreas();
      saveAreaHandler();
    }
  });
  startDrawing();
};

const saveDrawHandler = async () => {
  try {
    const params = {
      ...plottingParams.value,
      value: concentrationValue.value
    };
    const { code } = await getConcentration(params);
    if (code === 200) {
      showNongdu.value = false;
      await getGisListHandle();
    }
  } catch (error) {
    console.error('保存浓度失败:', error);
  }
};
//保存区域绘制
const saveAreaHandler = async () => {
  try {
    const params = {
      ...plottingParams.value,
      value: concentrationValue.value
    };
    const { code } = await getConcentration(params);
    if (code === 200) {
      await getGisListHandle();
    }
  } catch (error) {
    console.error('保存区域失败:', error);
  }
};
// 确保 warningId 同步
watch(currentWarningId, (newVal) => {
  plottingParams.value.warningId = newVal;
});
defineExpose({
  open: openHandle
});
</script>

<template>
  <!-- 区域标绘弹窗 -->
  <transition name="el-fade-in-linear">
    <div class="draw-box region-draw" v-show="dialogState[DialogType.SHOW_AREA]">
      <div class="draw-header">
        <h3>区域标绘</h3>
        <el-icon @click="closeDialog" class="close-icon">
          <Close />
        </el-icon>
      </div>
      <div class="draw-options">
        <div v-for="(option, index) in areaOptions" :key="index" class="draw-option" @click="drawFaces(option.type)">
          <img :src="option.icon" :alt="option.label" />
          <span>{{ option.label }}</span>
        </div>
      </div>
    </div>
  </transition>

  <!-- 浓度标绘弹窗 -->
  <transition name="el-fade-in-linear">
    <div class="draw-box" v-show="dialogState[DialogType.SHOW_DRAW]">
      <div class="draw-header">
        <h3>浓度标绘</h3>
        <el-icon @click="closeDialog" class="close-icon">
          <Close />
        </el-icon>
      </div>
      <div class="draw-options">
        <div class="draw-option" @click="draw('1')">
          <img src="@/assets/marks/tool_draw_point.png" alt="浓度点" />
          <span>浓度点</span>
        </div>
      </div>
    </div>
  </transition>

  <!-- 浓度值输入弹窗 -->
  <transition name="el-fade-in-linear">
    <div class="draw-box region-draw nongdu" v-show="showNongdu">
      <div class="draw-header">
        <h3>属性信息</h3>
        <el-icon @click="showNongdu = false" class="close-icon">
          <Close />
        </el-icon>
      </div>
      <div class="input-group">
        <label>浓度值:</label>
        <el-input v-model="concentrationValue" placeholder="请输入浓度值" type="number" />
      </div>
      <el-button type="primary" class="save-btn" @click="saveDrawHandler"> 保存</el-button>
    </div>
  </transition>
</template>

<style scoped lang="scss">
// 基础样式变量
$primary-color: rgba(32, 160, 255, 0.6);
$bg-color: rgba(0, 0, 0, 0.6);
$border-radius: 5px;
$transition-duration: 0.3s;

// 混合宏
@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: left;
}

.draw-box {
  z-index: 99;
  position: absolute;
  right: 26%;
  bottom: 30%;
  padding: 1rem;
  width: 220px;
  background-color: $bg-color;
  border: 1px solid $primary-color;
  border-radius: $border-radius;
  color: white;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
  transition: all $transition-duration ease;

  .draw-header {
    @include flex-center;
    justify-content: space-between;
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid $primary-color;

    h3 {
      margin: 0;
      font-size: 1rem;
      font-weight: normal;
    }

    .close-icon {
      cursor: pointer;
      transition: color $transition-duration;
    }
  }

  .draw-options {
    width: 100%;
    display: flex;
  }

  .draw-option {
    @include flex-center;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: $border-radius;
    transition: background-color $transition-duration;
    gap: 0.5rem;

    img {
      width: 28px;
      height: 28px;
      margin-bottom: 0.25rem;
    }

    span {
      font-size: 0.875rem;
    }
  }
}

.region-draw {
  .draw-options {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: left;
  }
}

.nongdu {
  width: 280px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  .input-group {
    @include flex-center;
    margin: 1rem 0;

    label {
      min-width: 30%;
      margin-right: 1rem;
      text-align: right;
    }
  }

  .save-btn {
    width: 100%;
    margin-top: 1rem;
    background-color: rgba(32, 160, 255, 0.2);
    border-color: #01c6f7;
    color: white;

    &:hover {
      background-color: rgba(32, 160, 255, 0.4);
    }
  }
}
</style>
